<template>
	<view class="bookDetalis">
		<toSafe></toSafe>
		<!-- 导航栏 -->
		<uni-nav-bar @clickLeft="HandleLeft" color="#111" :fixed="true" leftIcon="left" :border="false" backgroundColor="transparent" :title="''"></uni-nav-bar>

		<view class="bookMessage">
			<image :src="baseURL+data.imgSrc" mode=""></image>
			<view class="bookTitle">{{data.title}}</view>
			<view class="author">
				{{data.author}}
			</view>
		</view>
		<view class="content">
			<view class="tag">
				<text>简介</text>
				<!-- <view class="tags">
					玄幻
				</view>
				<view class="tags">
					玄幻
				</view>
				<view class="tags">
					玄幻
				</view>
				<view class="tags">
					其他标签
				</view> -->
			</view>
			<text class="fragment">{{data.subTitle}}</text>
			<!-- <view class="catalogue">
				<text class="title">目录</text>
				<view class="controls">
					<text>连载至377章</text>
					<uni-icons type="right" size="15" color="#818181"></uni-icons>
				</view>
			</view>
			<view class="evaluate">
				<view class="title">
					书评
				</view>
				<view class="evaluateLists">
					<view class="list">
						<img src="../../static/logo.png"/>
						<text>失去一个人最让你痛苦的不是刚刚失去时那种汹涌的难受，而是在你以为时间已经治愈一切时，却隔三差五猝不及防地想到这个人，挥之不去，去了又来。</text>
					</view>
				</view>
			</view> -->
			
		</view>
		<button type="warn" plain="true" class="btn" @click="LookBook">
			<text>阅读</text>
		</button>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { GetNovelInfo, buyBooks } from '@/api/Novel.js'
	import { ref } from 'vue'
	import toSafe from '@/compoents/top-safe.vue'
	const baseURL = ref("http://www.filwc.com/prod-api")
	interface BookDetail {
		title: string,
		imgSrc: string,
		author: string,
		subTitle: string,
		id: string,
		price: number,
		[prop: string]: any
	}
	const data = ref<BookDetail>({
		title: '',
		imgSrc: '',
		author: '',
		subTitle: '',
		price: 0,
		id: ''
	})
	const imgurl = ref(),
		isOwn = ref(-1);
	onLoad((e) => {
		if(e.imgurl) {
			imgurl.value = e.imgurl
		}
		if(e.id) {
			GetNovelInfo(e.id).then((res:any )=> {
				data.value = res.data
				console.log("小说详情",data.value)
			}).catch(err => {
				console.log("小说详情",err)
			})
		}
		isOwn.value = e.isOwn;
	})
	
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const toReady = () => {
		uni.navigateTo({
			// url:`/pages/bookDetalis/lookBooks?id=${data.value.id}`
			url:`/pages/bookDetalis/ready?id=${data.value.id}&pages=${data.value.pages}`
			// url:`/pages/bookDetalis/readyBooks?id=${data.value.id}&pages=${data.value.pages}`
		})
	}
	const LookBook = () => {
		let isMember = uni.getStorageSync("isMember");
		let balance = uni.getStorageSync("balance");
		console.log(isMember, balance)
		if(isMember != 2) {
			if(isOwn.value <= 0) {
				if(balance < data.value.price) {
					uni.showModal({
					  title: '提示',
					  content: "您账户余额不足，请充值",
					  cancelText: '取消',
					  confirmText: '确定',
					  success: (res) => {
						  uni.navigateTo({
							url: `/pages/recharge/recharge`
						  })
					  }
					})
					return;
				} else {
					buyBooks({novelId: data.value.id, novelBeans: data.value.price}).then((res:any) => {
						if(res.code == 200) {
							toReady()
						}
					})
				}
			} else {
				toReady()
			}
		} else {
			toReady()
		}
		
	}
</script>

<style lang="less" scoped>
	@interval: {
		letter-spacing: 2rpx;
	}

	@border: 1rpx solid #e8e3e3;


	.bookDetalis {
		width: 100%;
		height: 100%;
		padding: 0 40rpx;

		.bookMessage {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 80rpx;

			image {
				width: 186rpx;
				height: 262rpx;
				border-radius: 8rpx;
			}

			.bookTitle {
				font-size: 36rpx;
				font-weight: 600;
				margin: 40rpx 0 20rpx 0;
				@interval();
			}

			.author {
				font-size: 26rpx;
				opacity: 0.5;
				@interval();
			}
		}

		.content {
			padding: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;

			.tag {
				display: flex;
				margin-bottom: 20rpx;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}

				.tags {
					padding: 4rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					@interval();
					border-radius: 12rpx;
					background: #F5F5F5;
					font-size: 22rpx;
					opacity: 0.5;
					margin-left: 30rpx;
				}
			}

			.fragment {
				width: 100%;
				height: auto;
				font-size: 24rpx;
				@interval();
				opacity: 0.5;
				padding: 20rpx;
			}

			.catalogue {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25rpx 0;
				border-top: @border;
				border-bottom: @border;
				margin-top: 20rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
				}

				.controls {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					opacity: 0.5;
				}
			}

			.evaluate {
				display: flex;
				flex-direction: column;
				margin-top: 25rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
				}

				.evaluateLists {
					width: 100%;

					.list {
						display: flex;
						margin-top: 10rpx;

						img {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin: 0 10rpx 0 0;
						}

						text {
							font-size: 24rpx;
							opacity: 0.5;
							@interval();
						}
					}
				}
			}


		}

		.btn {
			margin-top: 40rpx;
			color: #E5353F;
			width: 320rpx;
			height: 72rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>